<template>
	<div class="layout-pd">
		<el-card shadow="hover" header="作业" class="mt15">
			<el-card shadow="hover" header="作业要求" class="mt15">
			<el-row class="mb10" style="color: #808080   ; ">{{ state.tableData.param.homeworkscotent }}</el-row>
		    </el-card> 

			<div class="flex-warp">
				<Auth :value="'btn.add'">
					<div class="flex-warp-item">

						<div class="flex-warp-item-box">
							<el-table :data="state.tableData.data">
								<el-table-column prop="uploadtime" :formatter="getLocalTime" label="提交时间" width="300" />
								<el-table-column prop="name" label="作业命名" width="400" />
								<el-table-column   label="状态" width="300"  show-overflow-tooltip>
									<template #default="scope " >
										<div  v-for="item in state.tableData.param.datas"  >
										<el-tag type="error" v-if="item.id==scope.row.id &&item.state=='打回'"> {{ item.state }}</el-tag>
					                    <el-tag type="success" v-if="item.id==scope.row.id &&item.state=='合格'"> {{ item.state }}</el-tag> 
					                    <el-tag type="success" v-if="item.id==scope.row.id &&item.state=='审核通过'"> {{ item.state }}</el-tag> 
					                    <el-tag type="info"  v-if="item.id==scope.row.id &&item.state=='待审核'"> {{ item.state }}</el-tag> 
					                    <el-tag type="error" v-if="item.id==scope.row.id &&item.state=='审核未通过'"> {{ item.state }}</el-tag> 
				                              </div>
									</template>
								</el-table-column>
								<el-table-column label="操作" width="300">
									<template #default="scope">
										<el-button text type="primary" @click="dowloadfile(scope.row.url)">
											下载</el-button>

											<el-tooltip class="item" effect="dark" content="双击删除"
                                                placement="top-start" >
												<el-button text type="primary" @click="deletescwript(scope.row)">删除</el-button>
                                            </el-tooltip>
										
									</template>
								</el-table-column>

							</el-table>
						</div>
					</div>
				</Auth>
			</div>

			<Auth :value="'btn.add'">
				<div class="flex-warp-item">
					<div class="flex-warp-item-box">
						<el-upload action="http://localhost:8080/mapfile/insertFile" :on-success="handleSuccess" :data="uploadForm.data"
							:show-file-list="false" :headers=state.tableData.param.user :limit="3">
							<el-button type="primary">上传</el-button>
						</el-upload>
					</div>
				</div>
			</Auth>
		</el-card>
	</div>
</template>

<script setup lang="ts" name="funClipboard">
import { Session } from '/@/utils/storage';
import { ref, reactive, } from 'vue'
//import { mapfiles } from '/@/api/mapfiles/index';
import { map } from '/@/api/mapfiles/index';
import { onMounted } from 'vue';
import { ElMessage } from 'element-plus';




const state = reactive<SysRoleState>({
	tableData: {
		data: [],
		total: 0,
		loading: false,
		param: {
			user: JSON.parse(localStorage.getItem("user") || '{}'),
			homeworkscotent:'',
			file: "",
			name: "",
			images: "",
			search: "",
			pageNum: 1,
			pageSize: 10,
			datas:[]
		},

	},
});


//格式化后端返回来的时间
function getLocalTime(value: any) {
	let time = value.uploadtime[0] + '-' + value.uploadtime[1] + '-' + value.uploadtime[2] + ' ' + value.uploadtime[3] + ':' + value.uploadtime[4] + ':' + value.uploadtime[5]
	return time
}


//页面上获取作业内容
function gethomworks(){
	state.tableData.param.homeworkscotent=Session.get(hid)
	
}
//上传文件的时候传作业hid
const uploadForm = reactive({
    data: {
       hid:JSON.parse(localStorage.getItem('hid') || '{}')
    }
})

//上传文件后获取后端响应的值
const handleSuccess = async (res: any, file: any) => { 
	// action 上传时的回调
	if(res.code==500){
		ElMessage.error(res.msg);
		getAllscript(hid);
	}else{
		state.tableData.data = res.data
	state.tableData.param.datas=res.data;
	ElMessage.success(`上传成功`);
	}
	
};


let hid = JSON.parse(localStorage.getItem('hid') || '{}');
//获取后端所有script的作业
const getAllscript = async (hid: object | undefined) => {
	map().getAllScrip(hid).then(res => {
		state.tableData.data = res.data;
		state.tableData.param.datas=res.data;
       
	})
}


//删除数据库的文件和oss中的存的文件
const deletescwript = async (row?: any) => {
	map().deleteUrl(row)
	getAllscript(hid)


}


//下载文件
const dowloadfile = async (url?: any) => {
	window.open(url)
}

//页面加载时去执行
onMounted(() => {
	getAllscript(hid)
	gethomworks()
})
</script>

<style scoped lang="scss">
.flex-warp {
	display: flex;
	flex-wrap: wrap;
	align-content: flex-start;
	margin: 0 -5px;

	.flex-warp-item {
		padding: 5px;

		.flex-warp-item-box {
			width: 100%;
			height: 100%;
		}
	}
}

.error {
	height: 100%;

	.error-flex {
		margin: auto;
		display: flex;
		height: 450px;
		width: 1050px;

		.left {
			flex: 1;
			height: 100%;
			align-items: center;
			display: flex;

			.left-item {
				.left-item-animation {
					opacity: 0;
					animation-name: error-num;
					animation-duration: 0.5s;
					animation-fill-mode: forwards;
				}

				.left-item-num {
					color: var(--el-color-info);
					font-size: 55px;
				}

				.left-item-title {
					font-size: 20px;
					color: var(--el-text-color-primary);
					margin: 15px 0 5px 0;
					animation-delay: 0.1s;
				}

				.left-item-msg {
					color: var(--el-text-color-secondary);
					font-size: 12px;
					margin-bottom: 30px;
					animation-delay: 0.2s;
				}

				.left-item-btn {
					animation-delay: 0.2s;
				}
			}
		}

		.right {
			flex: 1;
			opacity: 0;
			animation-name: error-img;
			animation-duration: 2s;
			animation-fill-mode: forwards;

			img {
				width: 100%;
				height: 100%;
			}
		}


	}
}
</style>



<!-- <template>
    <div class="layout-pd">
        <el-card shadow="hover" header="作业" class="mt15">
            <div class="flex-warp">
                <Auth :value="'btn.add'">
                    <div class="flex-warp-item">
                        <div class="flex-warp-item-box" >
                            <el-table :data="state.tableData.data">
                                <el-table-column  prop="uploadtime" :formatter="getLocalTime" label="提交时间" width="300" />
                                <el-table-column prop="name" label="作业命名" width="300" />
                                <el-table-column prop="sno" label="学号"  width="200" />
                                <el-table-column   prop="state" label="状态"   width="200" />
                                <el-table-column label="操作" width="300">
                                    <template #default="scope">
                                        <div >
                                            <el-tooltip class="item" effect="dark" content="审核不通过"
                                                placement="top-start">
                                                <el-button type="danger" v-show="!data.show" :icon="CircleCloseFilled"   @click="successf('审核未通过',scope)"
                                                circle />
                                            </el-tooltip>
                                            
                                            <el-tooltip class="item" effect="dark" content="审核通过"
                                                placement="top-start">
                                                <el-button type="success" v-show="!data.show" :icon="Check" circle   @click="successf('审核通过',scope)"/>
                                            </el-tooltip>
                                            
                                            <el-tooltip class="item" effect="dark" content="合格"
                                                placement="top-start">
                                                <el-button type="success" v-show="data.show" :icon="Check" circle   @click="successf('合格',scope)"/>
                                            </el-tooltip>

                                            <el-tooltip class="item" effect="dark" content="打回"
                                                placement="top-start">
                                                <el-button type="danger" v-show="data.show" :icon="CircleCloseFilled"   @click="successf('打回',scope)"
                                                circle />
                                            </el-tooltip>
                                            
                                            <el-tooltip class="item" effect="dark" content="下载"
                                                placement="top-start" >
                                                <el-button type="info" :icon="Download" circle  @click="dowloadfile(scope.row.scriptFile)"/>
                                            </el-tooltip>
                                        </div>
                                    </template>
                                </el-table-column>

                            </el-table>
                        </div>
                    </div>
                </Auth>
            </div>

        </el-card>
    </div>


</template>

<script setup lang="ts" name="funClipboard">
import { Session } from '/@/utils/storage';
import { ref, reactive, } from 'vue'
import { scriptApi } from '/@/api/script/index'
import { onMounted } from 'vue';
import {Check,CircleCloseFilled,Download} from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus';

const state = reactive<SysRoleState>({
    tableData: {
        data: [],
        total: 0,
        loading: false,
        param: {
            user: JSON.parse(localStorage.getItem("user") || '{}'),
            file: "",
            name: "",
            images: "",
            search: "",
            pageNum: 1,
            pageSize: 10,
            upstete:[]
        },

    },
});
//自定义参数
const data={
    hid:JSON.parse(localStorage.getItem('hid') || '{}'),
    state:'',
    state1:'',
    show:false,
    loginId:0, 
    name:"",
}

//格式化后端返回来的时间
function getLocalTime(value: any) {
    let time = value.uploadtime[0] + '-' + value.uploadtime[1] + '-' + value.uploadtime[2] + ' ' + value.uploadtime[3] + ':' + value.uploadtime[4] + ':' + value.uploadtime[5]
    return time
}


//获取后端所有script的作业
let user = JSON.parse(localStorage.getItem("user") || '{}')
const getAllscript = async () => {
    let role=user.role
    //老师只看审核通过和合格的
    if(role==0){
     data.state="审核通过"
     data.state1="合格"
     scriptApi().getScrip(data).then(res => {
        state.tableData.data = res.data;
        data.show=true
    })
}else{
     //审核员只能看待审核和审核通过的
    data.state="待审核"
    data.state1="审核通过"
    scriptApi().getScrip(data).then(res => {
        state.tableData.data = res.data;
    })
}
}


//下载文件
const dowloadfile = async (scriptFile?: any) => {
    window.open(scriptFile)
}


//审核员修改状态
const successf = async (content?: any, scope?: any) => {
    data.loginId=scope.row.loginId
    data.name=scope.row.name
    data.state=content
    scriptApi().updatesctate(data)
    getAllscript()
    //点击后刷新当前页面
    ElMessage(`${content}`);
    location.reload()
}


// const onSetAuth = () => {
//     // https://gitee.com/lyt-top/vue-next-admin/issues/I5C3JS
//     // 清除缓存/token等
//     Session.clear();
//     // 使用 reload 时，不需要调用 resetRoute() 重置路由
//     window.location.reload();

// };


//页面加载时去执行
onMounted(() => {
    getAllscript()
})
</script>

<style scoped lang="scss">
.flex-warp {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    margin: 0 -5px;

    .flex-warp-item {
        padding: 5px;

        .flex-warp-item-box {
            width: 100%;
            height: 100%;
        }
    }
}

.error {
    height: 100%;

    .error-flex {
        margin: auto;
        display: flex;
        height: 450px;
        width: 1050px;

        .left {
            flex: 1;
            height: 100%;
            align-items: center;
            display: flex;

            .left-item {
                .left-item-animation {
                    opacity: 0;
                    animation-name: error-num;
                    animation-duration: 0.5s;
                    animation-fill-mode: forwards;
                }

                .left-item-num {
                    color: var(--el-color-info);
                    font-size: 55px;
                }

                .left-item-title {
                    font-size: 20px;
                    color: var(--el-text-color-primary);
                    margin: 15px 0 5px 0;
                    animation-delay: 0.1s;
                }

                .left-item-msg {
                    color: var(--el-text-color-secondary);
                    font-size: 12px;
                    margin-bottom: 30px;
                    animation-delay: 0.2s;
                }

                .left-item-btn {
                    animation-delay: 0.2s;
                }
            }
        }

        .right {
            flex: 1;
            opacity: 0;
            animation-name: error-img;
            animation-duration: 2s;
            animation-fill-mode: forwards;

            img {
                width: 100%;
                height: 100%;
            }
        }


    }
}
</style> -->




<!-- <template>
	<div class="layout-pd">
		<el-card shadow="hover" header="复制剪切演示">
			<el-alert
				title="感谢优秀的 `vue-clipboard3`，项目地址：https://github.com/JamieCurnow/vue-clipboard3`"
				type="success"
				:closable="false"
				class="mb15"
			></el-alert>
			<el-input placeholder="请输入内容" v-model="state.copyVal">
				<template #append>
					<el-button @click="copyText(state.copyVal)">复制链接</el-button>
				</template>
			</el-input>
			<el-input placeholder="先点击上方 `复制链接` 按钮，然后 `Ctrl + V` 进行粘贴！ " v-model="state.shearVal" class="mt15"> </el-input>
		</el-card>
	</div>
</template>

<script setup lang="ts" name="funClipboard">
import { reactive } from 'vue';
import commonFunction from '/@/utils/commonFunction';

// 定义变量内容
const { copyText } = commonFunction();
const state = reactive({
	copyVal: 'https://gitee.com/lyt-top/vue-next-admin',
	shearVal: '',
});
</script> -->
